import { memo, useState } from "react"

// 1.验证默认的渲染机制，子跟着父仪器渲染

// 2.memo进行缓存 只有props发声变化的时候才会重新渲染（没考虑context）

// function Son() {
//     console.log(`我是子组件，我重新渲染了`)
//     return <div>this is son</div>
// }

const MemoSon = memo(function Son() {
    console.log(`我是子组件，我重新渲染了`)
    return <div>this is son</div>
})

const Role = () => {

    const [count, setCount] = useState(0)

    return (
        <div>
            <div>memo缓存子组件</div>
            <button onClick={() => setCount(count + 1)}>+{count}</button>
            {/* <Son /> */}
            <MemoSon />
        </div>
    )
}

export default Role